<template>
	<div class="logistics_list table-theme">
		<head-title title="设置--物流点列表"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<select-view 
						:option-list="onlieList" 
						:value="is_onlie" 
						placeholder="上下架"
						type="is_onlie"
						@value="setSelectValue">
					</select-view>
				</div>
				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<div class="add"><el-button type="primary" @click="add">添加物流</el-button></div>
				</div>
			</div>
			<p style="text-align: right;line-height: 30px;">总物流点数：{{ total }}</p>
			<el-table :data="logisticsList" stripe>
				<el-table-column label="物流序号" align="center" prop="address_id"></el-table-column>
				<el-table-column label="物流名称" align="center" prop="company_name"></el-table-column>
				<el-table-column label="始发站物流点联系人" align="center" prop="start_consignee"></el-table-column>
				<el-table-column label="始发站物流点手机号码" align="center" prop="start_mobile"></el-table-column>
				<el-table-column label="始发站物流点座机号" align="center" prop="start_landline"></el-table-column>
				<el-table-column label="始发站物流点详细地址" align="center" prop="">
					<template slot-scope="scope">
						{{ scope.row.start_province }}{{ scope.row.start_city }}{{ scope.row.start_district }}{{ scope.row.start_address }}
					</template>
				</el-table-column>
				<el-table-column label="终点站物流点联系人" align="center" prop="end_consignee"></el-table-column>
				<el-table-column label="终点站物流点手机号码" align="center" prop="end_mobile"></el-table-column>
				<el-table-column label="终点站物流点座机号" align="center" prop="end_landline"></el-table-column>
				<el-table-column label="终点站物流点详细地址" align="center" prop="">
					<template slot-scope="scope">
						{{ scope.row.end_province }}{{ scope.row.end_city }}{{ scope.row.end_district }}{{ scope.row.end_address }}
					</template>
				</el-table-column>
				<el-table-column label="上下架" align="center">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.is_onlie" :active-value="1" :inactive-value="2" @change="upDown($event, scope.row.address_id)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="180">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="edit(scope.row.address_id)">编辑</el-button>
						<el-button type="danger" size="mini" @click="del(scope.row.address_id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages"><el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination></div>
		</el-card>
	</div>
</template>

<script>
import SelectView from '@/components/SelectView';
export default {
	components:{
		SelectView
	},
	data() {
		return {
			logisticsList: [],
			total: 0,totalData: 0, 
			page: 0,
			is_onlie: 1, // 1上架 2下架
			onlieList:[
				{
					label:'上架',
					value:1
				},
				{
					label:'下架',
					value:2
				}
			]
		};
	},
	methods: {
		// 初始化列表
		init(e) {
			this.page = e;
			let data = {
				page: e - 1 ? e - 1 : 0,
				limit: 10,
				is_onlie: this.is_onlie
			};
			this.$http(this.$ApiList.LogisticsList, data).then(res => {
				this.logisticsList = [];
				this.logisticsList = res.datas.data;
				this.total = res.datas.count;
			});
		},
		add() {
			this.$router.push({ path: '/add_logistics' });
		},
		del(id) {
			this.$confirm('确定删除吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					let data = {
						address_id: id
					};
					this.$http(this.$ApiList.LogisticsDel, data).then(res => {
						if (res.code == 200) {
							this.$layer.msg('删除成功');
						}
					});
					location.reload()
				})
				.catch(() => {});
		},
		edit(id){
			this.$router.push({ path: '/add_logistics', query: { id: id } });
		},
		// 上下架
		upDown(e, id) {
			let data = {
				address_id: id,
				status: e
			};
			this.$http(this.$ApiList.LogisticsDown, data).then(res => {
				if (res.code == 200) {
					this.$layer.msg('操作成功');
				}
			});
			this.page = 1;
			this.init();
		},
		refreshPage() {
			this.page = 1;
			let data = {
				page: 0,
				limit: 10,
				is_onlie: this.is_onlie
			};
			this.$http(this.$ApiList.LogisticsList, data).then(res => {
				this.logisticsList = [];
				this.logisticsList = res.datas.data;
				this.total = res.datas.count;
			});
		},
		setSelectValue(obj){
			const { type,value } = obj
			switch (type) {
				case 'is_onlie':
					this.is_onlie = value
					break;
			
				default:
					break;
			}
			this.init()
		}
	},
	created() {
		this.init();
	}
};
</script>
<style lang="scss" scoped>

</style>
